<template>
  <div class="list-page-b">
    <div class="list-page">
      <div class="list-search">

        <div class="singe-search">
          <el-select v-model="search.selectValue" clearable placeholder="请选择资产/耗材" :size="size">
            <el-option v-for="item in options" :key="item.value"
              :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- <div class="singe-search">
          <el-input placeholder="请输入物品名称/编码搜索" v-model="search.inputValue" clearable :size="size">
          </el-input>
        </div> -->

        <!-- 远程搜索 -->
        <div class="singe-search">
          <el-autocomplete
            :size="size"
            :debounce="2000"
            value-key="name"
            v-model="search.searchValue"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入物品名称/编码"
            @select="handleSelect">
          </el-autocomplete>
        </div>
        <!-- 远程搜索 -->

        <div class="singe-search-time">
          <el-date-picker v-model="search.timeValue" type="daterange" :size="size"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="singe-search-btn">
          <el-button icon="icon-my-search" :size="size" @click="startSearch">搜索</el-button>
          <el-button icon="icon-my-reset" :size="size" @click="reSearch">重置</el-button>
        </div>

        <div class="singe-btn">
          <el-button type="info" disabled :size="size" icon="el-icon-download">下载模板</el-button>
        </div>
        <div class="singe-btn">
          <el-button type="info" :size="size" icon="el-icon-download" @click="toListPage">导入物品</el-button>
        </div>
        <div class="singe-btn">
          <el-button type="primary" :size="size" icon="el-icon-document-add" @click="addFun">新增资产</el-button>
        </div>
        <div class="singe-btn">
          <el-button type="primary" :size="size" icon="el-icon-document-add" @click="toInfoPage" style="margin-right: 0;">新增耗材</el-button>
        </div>

      </div>

      <div class="table-main">
        <el-table :data="tableData" style="width: 100%" :height="tableHeight">
          <el-table-column type="selection" label="序号" width="60" fixed="left">
          </el-table-column>
          <el-table-column prop="name" label="资物品名称" width="200">
          </el-table-column>
          <el-table-column prop="name" label="类型" width="200">
          </el-table-column>
          <el-table-column prop="date" label="品牌" width="500">
          </el-table-column>
          <el-table-column prop="address" label="资产/耗材" width="500">
          </el-table-column>
          <el-table-column prop="address" label="编码" width="500">
          </el-table-column>
          <el-table-column prop="address" label="供应商" width="500">
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" :size="size" @click="viewClick(scope.row)">查看</el-button>
              <el-button type="text" :size="size" @click="editClick(scope.row)">编辑</el-button>
              <el-button type="text" :size="size" @click="rowClick(scope.row)" style="color:#FF4329;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div>
          <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </div>


      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" class="form-dialog" append-to-body
        :close-on-click-modal="false">
        <div class="modalBody">
          <el-form ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="top">
            <el-form-item label="资产/耗材" prop="selectValue">
              <el-select v-model="ruleForm.selectValue" clearable placeholder="请选择资产/耗材" style="width:100%;">
                <el-option v-for="item in options" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物品名称/编码" prop="inputValue">
              <el-input placeholder="请输入物品名称/编码" v-model="ruleForm.inputValue" clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="日期" prop="timeValue">
              <el-date-picker v-model="ruleForm.timeValue" type="date" placeholder="请选择日期" style="width:100%;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入活动形式"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="clear: both"></div>
        <span slot="footer" class="dialog-footer">
          <!-- 保 存 -->
          <el-button type="primary" @click="dialogSave('ruleForm')" icon="el-icon-circle-plus-outline" size="small">
            保 存
          </el-button>
          <!-- 取 消 -->
          <el-button @click="dialogClose('ruleForm')" icon="el-icon-circle-close" size="small">
            取 消
          </el-button>
        </span>
      </el-dialog>


      <el-dialog title="详情" :visible.sync="infoVialogVisible" width="600px" class="form-dialog" append-to-body
        :close-on-click-modal="false">
        <div class="modalBody">
          <el-form ref="ruleForm" :model="ruleForm" label-position="top">
            <el-form-item label="资产/耗材" prop="selectValue">
              <el-select v-model="ruleForm.selectValue" disabled style="width:100%;">
                <el-option v-for="item in options" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物品名称/编码" prop="inputValue">
              <el-input v-model="ruleForm.inputValue" disabled clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="日期" prop="timeValue">
              <el-date-picker v-model="ruleForm.timeValue" disabled type="date" style="width:100%;">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc" disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import { getList } from "@/api/system/user";
export default {
  data() {
    return {
      size:"small",
      options: [
        {value: '选项1',label: '选项1'},
        {value: '选项2',label: '选项2'},
        {value: '选项3',label: '选项3'},
        {value: '选项4',label: '选项4'},
        {value: '选项5',label: '选项5'}
      ],
      tableData: [],
      pageSize:10,
      currentPage:1,
      search:{
        selectValue:"",
        inputValue:"",
        timeValue:[],
        // 远程搜索
        searchValue:"",
      },
      // 远程搜索
      restaurants: [],
      // 远程搜索
      dialogVisible:false,
      dialogTitle:"",
      ruleForm:{
        userId:"",
        selectValue:"",
        inputValue:"",
        timeValue:"",
        desc:"",
      },
      formRules:{
        selectValue: [
          { required: true, message: "请选择资产/耗材", trigger: 'change' },
        ],
        inputValue: [
          { required: true, message: "请输入物品名称/编码", trigger: 'blur' },
        ],
        timeValue: [
          { required: true, message: "请选择日期", trigger: 'change', type: "date" },
        ],
      },
      infoVialogVisible:false,
    }
  },
  computed:{
    tableHeight(){
      let h=document.body.clientHeight-230;
      return h;
    },
  },
  watch:{},
  created(){
    this.tableData=[]
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        id:i,
        date: '2016-05-03',
        name: '王小虎 '+i,
        address: '金沙江路 1516 '+i,
        selectValue: '选项'+i,
        inputValue: '王小虎 '+i,
        timeValue: '2016-05-03',
        desc: '金沙江路 1516 '+i,
      })
    }
  },
  mounted(){},
  methods:{
    pageSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val
      this.getTableData()
    },
    pageCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.getTableData()
    },
    // 查询
    startSearch(){
      this.getTableData()
    },
    // 刷新
    reSearch(){
      this.search={
        selectValue:"",
        inputValue:"",
        timeValue:[],
      }
      this.currentPage=1
      this.pageSize=10
      this.getTableData()
    },
    addFun(){
      this.dialogTitle="新增"
      if(this.$refs["ruleForm"]){
        this.$refs["ruleForm"].resetFields();
      }
      this.dialogVisible=true
    },
    delFun(){},
    editClick(row){
      console.log(`editClick`,row);
      this.ruleForm={
        userId:row.id,
        selectValue:row.selectValue,
        inputValue:row.inputValue,
        timeValue:row.timeValue,
        desc:row.desc,
      }
      this.dialogTitle="编辑"
      this.dialogVisible=true
    },
    viewClick(row){
      console.log(`viewClick`,row);
      this.ruleForm={
        userId:row.id,
        selectValue:row.selectValue,
        inputValue:row.inputValue,
        timeValue:row.timeValue,
        desc:row.desc,
      }
      this.infoVialogVisible=true
    },
    rowClick(row){
      console.log(`rowClick`,row);
      this.dialogVisible=true
    },
    dialogClose(formName){
      this.$refs[formName].resetFields();
      this.dialogVisible=false
    },
    dialogSave(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible=false
        } else {
          this.$message({
            type: "warning",
            message: "请输入必填项"
          });
          return false;
        }
      });
    },
    getTableData(){},

    toInfoPage(){
      this.$router.push({path: `/demo/infoDemo`});
    },
    toListPage(){
      this.$router.push({path: `/demo/listDemo`});
    },


    // 远程搜索
    querySearchAsync(queryString, cb) {
      if(queryString){
        this.getSearchList(queryString, cb)
      }else{
        cb([])
      }
    },
    getSearchList(queryString, cb) {
      let obj={
        account:queryString
      }
      getList(1, 20, obj, "").then(res => {
        const data = res.data.data;
        let list = data.records;
        this.restaurants = list;
        cb(list)
      });
    },
    handleSelect(item) {
      console.log("handleSelect",item);
    },
    // 远程搜索



  },
}
</script>

<style lang="scss">
@import '../../styles/page/list.scss';
</style>
